import React, { Component } from 'react';
import { Platform, View, ScrollView, Text, StatusBar, SafeAreaView } from 'react-native';
//import LinearGradient from 'react-native-linear-gradient';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import { sliderWidth, itemWidth } from '../../example/styles/SliderEntry.style';
import SliderEntry from '../../example/components/SliderEntry';
import styles, { colors } from '../../example/styles/index.style';
import { ENTRIES1 } from '../../example/static/entries';
import BackButton from '../../component/BackButton';
import { scrollInterpolators, animatedStyles } from '../../example/utils/animations';

const IS_ANDROID = Platform.OS === 'android';
const SLIDER_1_FIRST_ITEM = 0;

export default class example extends Component {
	static navigationOptions = ({ navigation }) =>{
    return{
      title:'会员特权',
      headerRight:(<View></View>),
			headerLeft:<BackButton navigation = {navigation}/>,
			headerStyle:{
				backgroundColor:'#272727'
			},
			headerTitleStyle:{
				color:'white',
				flex:1,
				textAlign:'center',
			}
    }
	};
    constructor (props) {
        super(props);
        this.state = {
						slider1ActiveSlide: SLIDER_1_FIRST_ITEM,
						entrys:[
							{
								img:require('../../images/mine/vip_advis_2.png'),
								title:'去广告',
								texts:[
									'1.VIP会员制作视频内容自动跳过贴片广告，可手动跳过定向推荐内容，省时省心不用等待！',
									'2.会员定向推荐内容关闭方法：点击右上角关闭按钮即可~',
									'3.初级会员：20次/年。'
								]
							},
							{
								img:require('../../images/mine/vip_temp_2.png'),
								title:'免费模板',
								texts:[
									'1.动画工厂海量模板、素材、音乐免费使用。',
									'2.不限使用次数。',
								]
							},
							{
								img:require('../../images/mine/vip_1080_2.png'),
								title:'高清1080P',
								texts:[
									'1.画质：VIP会员专享高清1080P画质体验，更逼真更动感，赋予您身临其境的观赏及下载体验。',
									'2.适配：完全适配各种尺寸屏幕。',
									'3.初级会员：享受10次/年下载体验。'
								]
							},
							{
								img:require('../../images/mine/vip_loading_2.png'),
								title:'去水印',
								texts:[
									'1.去视频水印（价值199元/次）：去除视频尾页及动画工场logo。',
									'2.去水印享受次数：5次。',
								]
							},
							{
								img:require('../../images/mine/vip_share_2.png'),
								title:'免费分享',
								texts:[
									'1.可将制作视频免费进行分享。',
									'2分享次数：200次。',
								]
							},
							{
								img:require('../../images/mine/vip_service_2.png'),
								title:'VIP服务器',
								texts:[
									'1.VIP会员享受设立的专属服务器。',
								]
							},
							{
								img:require('../../images/mine/vip_find_2.png'),
								title:'误删找回',
								texts:[
									'1.作品误删（价值9.9元/次）：删除的作品能够及时找回，降低作品因误删而造成的损失。',
									'2.会员专享作品误删找回请到【个人中心】-【回收站】中使用。',
									'3.作品在回收站中保留天数：7天。'
								]
							},
							{
								img:require('../../images/mine/vip_advis_2.png'),
								title:'CND加速',
								texts:[
									'1.会员独享线路为合成、下载提速！',
									'2.初级会员专享1.5倍提速。'
								]
							},
						]
        };
    }
    _renderItemWithParallax ({item, index}, parallaxProps) {
        return (
            <SliderEntry
              data={item}
              even={(index + 1) % 2 === 0}
              parallax={true}
							parallaxProps={parallaxProps}
							
            />
        );
    }
    mainExample (number, title) {
        const { slider1ActiveSlide } = this.state;

        return (
            <View style={styles.exampleContainer}>
                <Carousel
                  ref={c => this._slider1Ref = c}
                  data={this.state.entrys}
                  renderItem={this._renderItemWithParallax}
                  sliderWidth={sliderWidth}
                  itemWidth={itemWidth}
                  hasParallaxImages={true}
                  firstItem={SLIDER_1_FIRST_ITEM}
                  inactiveSlideScale={0.94}
                  inactiveSlideOpacity={0.7}
                  // inactiveSlideShift={20}
                  containerCustomStyle={styles.slider}
                  contentContainerCustomStyle={styles.sliderContentContainer}
                  loop={false}
                  loopClonesPerSide={2}
                  autoplay={false}
                  autoplayDelay={500}
                  autoplayInterval={3000}
                  onSnapToItem={(index) => this.setState({ slider1ActiveSlide: index }) }
                />
            </View>
        );
    }

    render () {
        const example1 = this.mainExample(1, 'Default layout | Loop | Autoplay | Parallax | Scale | Opacity | Pagination with tappable dots');
        return (
					<View style={{flex:1,backgroundColor:'#f0f0f0'}}>
							{ /*this.gradient */}
							<ScrollView
								style={styles.scrollview}
								scrollEventThrottle={200}
								directionalLockEnabled={true}
							>
									{ example1 }
							</ScrollView>
					</View>
        );
    }
}
